import React, { useEffect, useState } from "react";
import { NavBar, SearchBar } from "antd-mobile";
import { useNavigate } from "react-router";
import MovieBanner from "./MovieBanner";
import MovieMain from "./MovieMain";
import { movieBannerQuery } from "../../service/movieService";
import "./moviesList.scss"
export default function Movie() {
  let [bannerList, setBannerList] = useState([]);
  useEffect(() => {
    (async () => {
      let res = await movieBannerQuery();
      setBannerList(res.data.rows);
    })();
  }, []);
  const history = useNavigate();
  const back = () => history(-1);
  return (
    <div
      style={{
        position: "fixed",
        top: "0px",
        bottom: "0px",
        left: "0px",
        right: "0px",
        backgroundColor: "#f5f6f8",
        overflow: "scroll",
        zIndex: "1",
      }}
    >
      <div>
        <NavBar onBack={back}>看电影</NavBar>
      </div>
      <div className="mySearch">
        <SearchBar
          placeholder="请输入内容"
          style={{
            "--border-radius": "100px",
            "--background": "#ffffff",
            "--height": "32px",
            "--padding-left": "12px",
          }}
        />
      </div>
      <MovieBanner list={bannerList}></MovieBanner>
      <MovieMain></MovieMain>
    </div>
  );
}
